<script setup lang="ts">
import { useIntervalFn } from "@vueuse/core";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "default";
  // return "dark";
});

const funnelChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, resize } = useECharts(
  funnelChartRef as Ref<HTMLDivElement>,
  { theme }
);

setOptions({
  title: {
    text: "漏洞处理状态",
    textStyle: {
      fontSize: 15,
      color: "#2fdbbb",
      fontWeight: "normal"
    }
  },
  tooltip: {
    // trigger: "axis",
    trigger: "item",
    extraCssText:
      "background-color: #fff; color: #333;box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);padding:10px;",
    axisPointer: {
      label: {
        padding: [20, 20, 50, 20]
      },
      lineStyle: {
        type: "dotted",
        color: "#999"
      }
    }
  },
  legend: {
    show: false,
    type: "scroll",
    right: 0,
    top: "10",
    orient: "vertical",
    // icon: "rect",
    data: [
      "漏洞1解决率",
      "漏洞2解决率",
      "漏洞3解决率",
      "漏洞4解决率",
      "漏洞5解决率",
      "漏洞6解决率",
      "漏洞7解决率"
    ],
    // itemGap: 10,
    // itemWidth: 10,
    // itemHeight: 10,
    borderWidth: 0,
    textStyle: {
      color: "#fff"
    }
  },
  calculable: !0,
  series: [
    {
      name: "资产数值",
      type: "funnel",
      // left: "5%",
      left: "center",
      top: "40",
      bottom: "0",
      width: "80%",
      // height: "93%",
      min: 0,
      max: 100,
      minSize: "20%",
      maxSize: "90%",
      sort: "descending",
      gap: 0,
      label: {
        show: !0,
        position: "inside",
        formatter: "{d}%"
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: "solid"
        }
      },
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1 //同时控制legend的宽度
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 100, name: "漏洞1解决率", itemStyle: { color: "#245567" } },
        { value: 0, name: "漏洞2解决率", itemStyle: { color: "#3D3F51" } },
        { value: 0, name: "漏洞3解决率", itemStyle: { color: "#313B43" } },
        { value: 0, name: "漏洞4解决率", itemStyle: { color: "#3E534A" } },
        { value: 0, name: "漏洞5解决率", itemStyle: { color: "#375359" } },
        { value: 0, name: "漏洞6解决率", itemStyle: { color: "#4E3D25" } },
        { value: 0, name: "漏洞7解决率" }
      ]
    }
  ]
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="funnelChartRef" :style="{ height, width }" />
</template>
